<script lang="ts" setup>
import type { CharacterBaseInfo } from '@/utils/type';
import { ref, onMounted } from 'vue';
import { apiFetch } from '@/utils/apiFetch';
import { useRouter } from 'vue-router'
// 玩家角色列表
const playerList = ref<CharacterBaseInfo[]>([]);

// 响应式数据
const router = useRouter() 
//  获取玩家角色列表
const getPlayerList = async () => {
  try {
    const url = 'api/playerRole/getPlayerRoleList';
    const options = {
      method: 'GET'
    };
    const data = await apiFetch<{ code: number; data: CharacterBaseInfo[] }>(url, options);
    if (data.code !== 200) {
      return;
    }
    playerList.value = data.data;
  } catch (error) {
    playerList.value = [];
  }
}


// 组件挂载后调用
onMounted(() => {
  getPlayerList()
})

// 选择角色
const selectPlayer = (item: CharacterBaseInfo) => {
  console.log(item);
  router.push({
    name: 'game',
    query: {
      id: item.id
    }
  })
}

</script>
<template>
  <div class="player-list">
    <van-row class="player-list-item" v-for="item in playerList" :key="item.id" @Click="selectPlayer(item)">
      <van-col span="20">{{ item.name }}</van-col>
      <van-col span="4">
        <van-icon name="arrow" />
      </van-col>
    </van-row>
  </div>
</template>

<style scoped>
.player-list-item:hover{
  cursor: pointer;
}
</style>
